import { Component, OnInit, ViewChild} from '@angular/core';
import { AppService } from '../../app.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import {HttpPaginationComponent} from '../../shared/pagination/http-pagination.component';

import {SlideshowsRenameComponent } from './slideshows-rename.component';
import { ConfirmComponent } from '../../shared/modal/confirm.component';
import {SlideshowsModel, SlideshowsCategoryModel } from '../../models/SlideshowsModel';
import { SlideshowsService } from '../../services/slideshows.service';
import { NgbTabset } from '@ng-bootstrap/ng-bootstrap';
import {ConfirmConfig} from '../../shared/modal/modal-model';

@Component({
    selector: 'app-slideshows',
    templateUrl: './slideshows.component.html'
})

export class SlideshowsComponent {

    categories: Array<SlideshowsCategoryModel>;

    ngbTabsetActiveId = 'add';
    constructor(
        private appService: AppService,
        private slideshowsService: SlideshowsService,
        private modalService: NgbModal
    ) {
        const that = this;
        this.appService.titleEventEmitter.emit('幻灯片');
        this.getSlideshowsCategories();

        this.appService.slideshowsRefreshEventEmitter.subscribe((value) => {
            that.getSlideshowsCategories();
        });
    }

    getSlideshowsCategories() {
        const that = this;
        this.slideshowsService.getSlideshowsCategories(function(successful, res) {
            if (successful && res && res.length) {
                that.categories = res;
                that.ngbTabsetActiveId = res[0].id;
                that.slideshowsService.getSlideshows(res[0].id, function(isOK, shows) {
                    if (isOK) {
                        res[0].slideshows = shows;
                    }
                });
            }else {

            }
        });
    }

    tabChange($event) {
        const that = this;
        if ($event.nextId === 'add') {
            this.addCategory();
            $event.preventDefault();
        } else {
            // const categoryId = $event.nextId;
            // this.slideshowsService.getSlideshows(categoryId, function(successful, res) {
            //     if (successful) {
            //         that.categories.forEach(function(x) {
            //             if (x.id === categoryId) {
            //                 x.slideshows = res;
            //                 console.log(res);
            //             }
            //         });
            //     }
            // });
        }
    }

    addCategory() {
        const that = this;
        const modalRef = this.modalService.open(SlideshowsRenameComponent);
        modalRef.componentInstance.modalTitle = '添加分类';
        modalRef.result.then((categoryName) => {
            that.slideshowsService.updateSlideshowsCategory(0, categoryName, function(){
                that.getSlideshowsCategories();
            });
        }, (reason) => {
            console.log(reason);
        });
    }
    renameCategory(item) {
        const that = this;
        const modalRef = this.modalService.open(SlideshowsRenameComponent);
        modalRef.componentInstance.modalTitle = '编辑分类';
        modalRef.componentInstance.modalText = item.categoryName;
        modalRef.result.then((categoryName) => {
            that.slideshowsService.updateSlideshowsCategory(item.id, categoryName, function(){
                item.categoryName = categoryName;
            });
        }, (reason) => {
            console.log(reason);
        });
    }
    removeCategory(item) {
        console.log('remove cateogry:');
        console.log(item);

        const that = this;
        const modalRef = this.modalService.open(ConfirmComponent);
        const msg = `您确定要删除分类 <code><b>${item.categoryName}</b></code> 吗？<br />此操作会同时删除此分类下的所有幻灯片，请谨慎操作!`;
        modalRef.componentInstance.config = new ConfirmConfig(msg);

        modalRef.result.then((result) => {
            if (result.status === 'approved') {
                that.slideshowsService.removeSlideshowsCategory(item.id, function() {
                    that.getSlideshowsCategories();
                });
            }
        }, (reason) => {

        });
    }
}
